<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {getCommentListService, getStarLevelService} from "@/api/modules/comment.js";

defineOptions({name: 'Comment'})
const commentList = ref([])
const level = ref({
  bad: 0,
  medium: 0,
  good: 0
})
const queryParam = ref({
  page: 1,
  size: 10,
  stars: 5
})

const isLoading = ref(false)
const isFinished = ref(false)
const total = ref(0)
const getCommentList = async () => {
  const result = await getCommentListService(queryParam.value)
  for (let i = 0; i < result.records.length; i++) {
    if (result.records[i].pic) {
      result.records[i].pics = result.records[i].pic.split(";")
    } else {
      result.records[i].pics = []
    }
  }
  total.value = result.total
  return result.records
}

const getStarLevel = async () => {
  return await getStarLevelService()
}
onMounted(async () => {
  commentList.value = await getCommentList()
  level.value = await getStarLevel()
  initChart()
})

const onBottom = async () => {
  console.log('到达底部')
  if (commentList.value.length >= total.value) {
    isFinished.value = true
    return
  }
  // 解决请求未响应结束，多个请求到来
  if (isLoading.value) {
    console.log('请求正在加载...')
    return
  }
  queryParam.value.page = queryParam.value.page + 1
  isLoading.value = true
  isFinished.value = false
  const records = await getCommentList()
  isLoading.value = false
  commentList.value.push(...records)
}

const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])

const searchByLevel = async () => {
  queryParam.value.page = 1
  queryParam.value.size = 10
  total.value = 0
  isFinished.value = false
  commentList.value = await getCommentList()
}

const initChart = () => {
  const myChart = echarts.init(document.getElementById("level-chart"))
  myChart.setOption({
    title: {
      text: '用户反馈'
    },
    tooltip: {
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name:'评论数',
        type: 'pie',
        data: [
          {
            value: level.value.bad,
            name: '差评'
          },
          {
            value: level.value.medium,
            name: '中评'
          },
          {
            value: level.value.good,
            name: '好评'
          }
        ]
      },
    ]
  })
}
</script>

<template>
  <div class="header">
    <div>
      <el-rate v-model="queryParam.stars" :colors="colors" class="stars"/>
      <el-button type="success" :onclick="searchByLevel">查询</el-button>
    </div>
  </div>
  <div class="center">
    <div class="left">
      <div v-if="commentList.length>0">
        <el-timeline style="max-width: 600px">
          <ul v-infinite-scroll="onBottom" :infinite-scroll-immediate="false">
            <el-timeline-item :timestamp="item.createTime" placement="top" v-for="item in commentList">
              <el-card>
                <h4 class="userInfo">
                  <el-image class="avatar"
                            :src="item.user.avatar"></el-image>
                  <span>{{ item.user.nickname }}</span>
                  <el-rate v-model="item.stars" :colors="colors" class="stars" disabled/>
                </h4>
                <div class="comment" v-if="item.pics.length>0 || item.content!==''">
                  <template v-if="item.pics.length>0">
                    <el-image class="pic" v-for="(picItem,index) of item.pics" :key="index" :src="picItem"
                              :preview-src-list="item.pics" :initial-index="index"></el-image>
                  </template>
                  <p>{{ item.content }}</p>
                </div>
                <div class="comment" v-else>
                  <p>暂无评论信息</p>
                </div>
              </el-card>
            </el-timeline-item>
          </ul>
        </el-timeline>
      </div>
      <div v-else style="max-width: 600px">
        <el-empty description="没有该星级的评论"/>
      </div>
    </div>
    <div class="right" id="level-chart"></div>
  </div>

  <hr>
  <div v-if="isFinished" class="footer">
    <span>加载完成！</span>
  </div>
  <div v-if="isLoading" class="footer">
    <span>加载中....</span>
  </div>
</template>

<style scoped lang="scss">

.el-card {
  padding: 0;
  height: 100%;

  :deep .el-card__header {
    height: 50px;
    padding: 10px;
  }

  :deep .el-card__body {
    height: calc(100% - 120px);
    padding: 10px;
  }
  :deep .el-card__footer {
    height: 50px;
    padding: 10px;
  }
  .el-table {
    height: calc(100%);
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 10px;

  .level {
    display: flex;
  }

  .stars {
    margin-left: 30px;
  }
}

.center {
  display: flex;
  justify-content: space-between;

  .left {
    flex: 2;
  }

  .right {
    height: 80%;
    width: 30%;
    flex: 1;
    position: fixed !important;
    right: 30px;
    bottom: 30px;
  }
}

.userInfo {
  display: flex;
  align-items: center;

  .avatar {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .stars {
    margin-left: 50px;
  }
}

.comment {
  padding: 10px;

  .pic {
    margin: 5px;
    height: 80px;
    width: 80px;
  }
}

.footer {
  text-align: center;
}
</style>
